<template>
  <div class="body-container">
    <div class="left-container d-none d-xl-block" align="left">
      <div class="fixed-container">
        <span class="line"> <b>网站版块</b> </span>
        <div>
          <b-list-group>
            <b-list-group-item
              @click="changeModules(0)"
              :class="{
                'list-group-item-active': 0 === moduleActive,
                'list-group-item': 0 !== moduleActive,
              }"
              >网站介绍</b-list-group-item
            >
            <b-list-group-item
              v-for="({ topicName, id }, index) in moduleList"
              :key="index + 1"
              :class="{
                'list-group-item-active': index + 1 === moduleActive,
                'list-group-item': index + 1 !== moduleActive,
              }"
              @click="changeModules(index + 1, id)"
              >{{ topicName }}</b-list-group-item
            >
          </b-list-group>
        </div>
      </div>
    </div>
    <div class="center-container">
      <router-view :topic="topicId" />
    </div>

    <div class="right-container d-none d-xl-block">
      <user-box></user-box>
      <hot-box></hot-box>
      <recommend-box></recommend-box>
    </div>
  </div>
</template>

<script>
import UserBox from "../components/userBox.vue";
import HotBox from "../components/hotBox.vue";
import RecommendBox from "../components/recommendBox.vue";

import TopicApi from "../api/topic";
export default {
  components: {
    UserBox,
    HotBox,
    RecommendBox,
  },
  data() {
    return {
      moduleList: [],
      moduleActive: 0,
      topicId: "",
    };
  },
  methods: {
    getModulesList() {
      TopicApi.getList().then((r) => {
        if (r.code === 200) {
          // this.moduleId = r.data[0].id;
          this.moduleList = r.data;
        }
      });
    },
    changeModules(index, id) {
      if (index === 0) {
        this.$router.push("/welcome");
      } else {
        this.topicId = id;
        this.$router.push("/pressList");
      }
      this.moduleActive = index;
    },
  },
  created() {
    // this.moduleActive = 0
    this.getModulesList();
  },
};
</script>

<style lang="scss" scoped>
.body-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.left-container {
  width: 300px;
  max-width: 340px;
  .fixed-container{
    position: fixed;
  overflow: auto;
  width: auto;
  min-width: 160px;
  max-width: 300px;
  padding: 24px 12px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-content: center;
  color: var(--font-color-ts-title) !important;
  font-size: 15px;
  }
  .line {
    border-bottom: 2px solid var(--font-color-ts-title);
    display: inline-block;
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .list-group-item {
    overflow: hidden;
    margin: 12px 0px;
    font-size: 14px;
    background-color: var(--bg-color);
    border: 0px;
    border-radius: var(--box-radius);
    box-shadow: 0px 2px 5px #7994873f;
    text-align: center !important;
    color: var(--font-color-default);
    backdrop-filter: var(--bg-filter-blur);
    position: relative;
    transition: 0.3s;
  }

  .list-group-item[class$="item"]:hover {
    background-color: var(--bg-color-hover);
    box-shadow: 0 5px 10px var(--color1);
    color: #525252;
    cursor: pointer;
    left: 10px;
  }

  .list-group-item-active {
    background-color: var(--color3);
    color: #fff;
    box-shadow: 0 5px 5px var(--color2);
    left: 10px;
  }
}

.center-container {
  width: 900px;
  padding: 24px;

  padding-bottom: 100px;
  margin: 24px 12px 24px 12px;
  background-color: var(--bg-color);
  backdrop-filter: var(--bg-filter-blur);
  box-shadow: var(--box-shadow);
  border-radius: var(--box-radius);
}
@media (max-width:528px ) {
  .center-container {
    margin: 12px 0;
  }
}

.right-container {
  width: 400px;
  padding: 24px 24px 24px 12px;

  > div {
    padding: 24px;
    width: 100%;
    background-color: var(--bg-color);
    backdrop-filter: var(--bg-filter-blur);
    box-shadow: var(--box-shadow);
    border-radius: var(--box-radius);
  }
  > div:nth-of-type(n + 2) {
    margin-top: 24px;
  }
}

.hot-box:nth-of-type(n + 2) {
  margin-top: 24px;
}
</style>